<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        div {
            width: 40px;
            height: 40px;
            background-color: red;
            color: white;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>

<body>
    <p>得分：<b>0</b></p>
</body>

<script>
    let char;
    let timer;
    let divDom;

    // 封装获取随机数的函数
    function makeRandom(start, end) {
        return Math.floor(Math.random() * (end - start) + start);
    }

    // 封装一个生成随机字符的函数
    function makeChar() {
        let str = 'abcdefghijklmnopqrstuvwxyz0123456789';
        // 随机下标
        let index = makeRandom(0, str.length);
        return str[index];
    }
    console.log(makeChar());

    // 封装生成一个装随机字符的盒子
    function createDiv() {
        // 1.先创建一个盒子放到body
        divDom = document.createElement('div');
        document.body.appendChild(divDom);

        // 2.生成随机字符放到盒子中
        char = makeChar();
        divDom.innerHTML = char;

        // 3.获取可视窗口的宽高
        let bodyWidth = document.body.clientWidth;
        let bodyHeight = document.body.clientHeight;

        // 4.计算盒子最大left值
        let maxLeft = bodyWidth - divDom.clientWidth;

        // 5.让盒子在最大范围内随机x轴方向出现
        let left = makeRandom(0, maxLeft);
        divDom.style.left = left + 'px';

        // 6.定时器控制盒子下落
        timer = setInterval(function () {
            // 获取盒子当前的top值
            let height = parseInt(window.getComputedStyle(divDom)['top']);
            // console.log(height);

            // 判断如果没到达底部，以0.05秒10px速度下落
            if (height < bodyHeight - divDom.clientHeight) {
                divDom.style.top = height + 10 + 'px';
            }
            // 到底部之后清除计时器和删除盒子
            else {
                clearInterval(timer);
                divDom.remove();
                // 回调
                createDiv();
            }
        }, 50)
    }
    createDiv();

    // 绑定键盘的按下事件，和生成的字符作比较
    addEventListener('keypress', function (e) {  // onkeypress  按键按下并松开时触发 (按下时触发 => 文本输入相关的按键(数字 字母 标签符号 enter space)可以触发)
        // 触发的事件
        var e = e || window.event;
        console.log(e);
        if (e.key == char) {
            clearInterval(timer);
            divDom.remove();
            // 回调
            createDiv();
            document.querySelector('b').innerHTML++;
        } else {
            clearInterval(timer);
            divDom.remove();
            // 回调
            createDiv();
            document.querySelector('b').innerHTML--;
        }
    })

</script>

</html>